<template>
  <el-container>
    <el-main class="shouye">
      <h1>
        欢迎来到毕业生系统
      </h1>
    </el-main>
  </el-container>
  <div style="display: flex">
    <div style="flex: 1;margin-top: 50px">
      <div id="bie" style="width: 100%;height: 400px"></div>
    </div>
    <div style="flex: 1;margin-top: 50px">
      <div id="bar" style="width: 100%;height: 400px"></div>
    </div>
  </div>


</template>


<script setup>
import * as echarts from "echarts";
import { onMounted, onBeforeUnmount } from 'vue';
import axios from 'axios';

let chartDom1;
let chartDom;
let myChart1;
let myChart;
let option1;
let option;
//onMounted钩子函数会被自动调用
onMounted(() => {
  const bie = () => {
    chartDom1 = document.getElementById('bie');
    myChart1 = echarts.init(chartDom1);

    axios.get('http://localhost:8080/view/bie')
        .then(response => {
          const employedCount = response.data.data.employedCount;
          const unemployedCount = response.data.data.unemployedCount;

          option1 = {
            title: {
              text: '就业统计',
              subtext: '就业情况',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: '数量',
                type: 'pie',
                radius: '50%',
                data: [
                  { value: employedCount, name: '已就业' },
                  { value: unemployedCount, name: '未就业' }
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };

          option1 && myChart1.setOption(option1);
        })
        .catch(error => {
          console.log(error);
        });
  }
  const bar = () => {
    chartDom = document.getElementById('bar');
    myChart = echarts.init(chartDom);

    axios.get('http://localhost:8080/view/bar')
        .then(response => {
          console.log(response)
          const xAxis = response.data.data.xAxis;
          const newXAxis = xAxis.split(',').map(item => item.trim().replace(/^\[|\]$/g, ''));
          const yAxis = response.data.data.yAxis;
          const newYAxis = yAxis.split(',').map(item => item.trim().replace(/^\[|\]$/g, ''));

          option = {
            title: {
              text: '薪资统计（柱状图）',
              subtext: '已就业学生薪资分类',
              left: 'center'
            },
            xAxis: {
              type: 'category',
              data: newXAxis
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: newYAxis,
                type: 'bar',

              }
            ]
          };

          option && myChart.setOption(option);
        })
        .catch(error => {
          console.log(error);
        });
  }
  bie();
  bar();
});

//销毁图表实例并释放内存
onBeforeUnmount(() => {
  if (myChart1 || myChart) {
    myChart1.dispose(); // 销毁图表实例
    myChart.dispose();
    myChart1 = null; // 将变量设置为null，以便垃圾回收器回收内存
    myChart = null;
  }
  if (chartDom1 || chartDom) {
    chartDom1 = null; // 将变量设置为null，以便垃圾回收器回收内存
    chartDom = null; // 将变量设置为null，以便垃圾回收器回收内存
  }
});
</script>
<style lang="scss" scoped>
.shouye{
  & h1{
    text-align: center;
    width: auto;
    font-size: 35px;
  }
}
</style>


